<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 房间管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <!--      <div class="handle-box">-->
      <!--        <el-input-->
      <!--            v-model="query.name"-->
      <!--            placeholder="房间号"-->
      <!--            class="handle-input mr10"-->
      <!--        ></el-input>-->
      <!--        <el-button type="primary" icon="el-icon-search" @click="handleSearch"-->
      <!--        >搜索-->
      <!--        </el-button-->
      <!--        >-->
      <!--      </div>-->
      <div style="display: flex">
        <el-form :inline="true" :model="inputDate" class="demo-form-inline">
          <el-form-item label="所属校区">
            <el-input v-model="inputDate.region" disabled/>
          </el-form-item>
          <el-form-item label="公寓名称">
            <el-input v-model="inputDate.name" disabled/>
          </el-form-item>
          <el-form-item label="住宿类型">
            <el-input v-model="inputDate.type" disabled/>
          </el-form-item>
          <!--          <el-form-item label="楼层数量">-->
          <!--            <el-input-number v-model="inputDate.floorNum" :disabled="true"/>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
      <el-divider/>
      <div class="clist">
        <div><i class="el-icon-s-data"></i>房间信息列表</div>
      </div>
      <el-table
          :data="childrenDte"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column
            :show-overflow-tooltip="true"
            :prop="item.prop"
            :label="item.label"
            v-for="item in props"
            :key="item.prop"
        >
        </el-table-column>
        <el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center"
              fixed="right"
          >
            <template #default="scope">
              <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row.sid)"
              >编辑
              </el-button>
              <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="red"
                  @click="handleDelete(scope.$index, scope.row.sid)"
              >删除
              </el-button
              >
              <el-button
                  type="text"
                  icon="el-icon-edit"
                  class="red"
                  @click="handleBedEdit( scope.row.sid)"
              >床位管理
              </el-button
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!--        <div class="pagination">-->
      <!--          <el-pagination-->
      <!--              :currentPage="query.pageNum"-->
      <!--              :page-sizes="[10, 20, 40]"-->
      <!--              :page-size="query.pageSize"-->
      <!--              layout="total, sizes, prev, pager, next, jumper"-->
      <!--              :total="pageTotal"-->
      <!--              @size-change="handleSizeChange"-->
      <!--              @current-change="handlePageChange"-->
      <!--          >-->
      <!--          </el-pagination>-->
      <!--        </div>-->
    </div>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import request from "../../utils/request";
import {useStore} from "vuex";

export default {
  name: "RoomEdit",
  setup() {
    const root = "/building/";
    const rootRoom = "/room/";
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const props = [
      {label: "房间号", prop: "name"},
      {label: "所属楼层", prop: "floor"},
      {label: "床位数量", prop: "bed"},
    ];

    const query = reactive({
      region: "",
      name: "",
      type: "",
      floor: "",
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据
    const inputDate = reactive({
      name: "", //公寓名称
      type: "",//类型
      floorNum: "", //楼层数量
      region: "",
    });
    if (route.query.name && route.query.region && route.query.type && route.query.floor) {
      query.region = route.query.region
      query.name = route.query.name
      query.type = route.query.type
      query.floor = route.query.floor
      request
          .get(root + "createBuildingRoomFloor", {
            params: query,
          })
          .then((res) => {
            if (res.code == 18) {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              inputDate.type = res.data.type;
              inputDate.region = res.data.region
              inputDate.name = res.data.name
              inputDate.floorNum = res.data.floorNum
              childrenDte.value = res.data.buildingList[0].roomList;

              /* for (var i = 0; i < tableData.value.length; i++) {
                 if (tableData.value[i].roomList == null) {
                   tableData.value[i].room = "--";
                 }
               }*/
            }
          });
    }
    // childrenDte.value = res.data.buildingList;
    const childrenDte = ref([]);
    // 获取表格数据
    const getData = () => {
      request
          .get(root + "createBuildingRoomFloor", {
            params: query,
          })
          .then((res) => {
            if (res.code == 18) {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              inputDate.type = res.data.type;
              inputDate.region = res.data.region
              inputDate.name = res.data.name
              inputDate.floorNum = res.data.floorNum
              childrenDte.value = res.data.buildingList[0].roomList;

              /* for (var i = 0; i < tableData.value.length; i++) {
                 if (tableData.value[i].roomList == null) {
                   tableData.value[i].room = "--";
                 }
               }*/
            }
          });
    };
    getData();

    // // 查询操作
    // const handleSearch = () => {
    //   query.pageNum = 1;
    //   getData();
    // };
    // // 分页大小
    // const handleSizeChange = (val) => {
    //   query.pageSize = val;
    //   getData();
    // };
    // // 分页导航
    // const handlePageChange = (val) => {
    //   query.pageNum = val;
    //   getData();
    // };
    // const getData = () => {
    //   request
    //       .get(root + "page", {
    //         params: query,
    //       })
    //       .then((res) => {
    //         if (res.code == 18) {
    //           ElMessage.warning(res.msg);
    //           tableData.value=[]
    //         } else {
    //           tableData.value = res.data.records;
    //           pageTotal.value = res.data.total;
    //         }
    //       });
    // };
    // getData();

    // 查询操作
    // const handleSearch = () => {
    //   query.pageNum = 1;
    //   getData();
    // };
    // // 分页大小
    // const handleSizeChange = (val) => {
    //   query.pageSize = val;
    //   getData();
    // };
    // // 分页导航
    // const handlePageChange = (val) => {
    //   query.pageNum = val;
    //   getData();
    // };

    // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
          .then(() => {
            request.delete(rootRoom + sid).then((res) => {
              if (res.data) {
                ElMessage.success("删除成功");
                tableData.value.splice(index, 1);
                getData()
              } else {
                ElMessage.error("删除失败");
                getData()
              }
            });
          })
          .catch(() => {
          });
    };

    // 新增操作
    const handleAdd = () => {
      router.push("/admin/addCollege");
    };

    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    let form = reactive({
      name: "",
      address: "",
    });
    const handleEdit = (sid) => {
      router.push({path: "/admin/addRoomEdit", query: {id: sid}});
    };
    const handleBedEdit = (sid) => {
      router.push({path: "/admin/bedEdit", query: {roomId: sid}});
    };

    return {
      props,
      query,
      tableData,
      pageTotal,
      editVisible,
      form,
      inputDate,
      childrenDte,
      getData, handleBedEdit,
      // handleSearch,
      // handleSizeChange,
      // handlePageChange,
      handleAdd,
      handleDelete,
      handleEdit,
    };
  },
};
</script>

<style scoped>
.clist {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
